<template>
    <view class="icon-favorite flex-center shadow" :class="{ selected: isFavorite }" @click.stop="click">
        <iconfont size="24px" name="icon-love"></iconfont>
    </view>
</template>

<script>
import { getHouseDetail, updateSaved } from '../../lib/service';
export default {
    name: 'favorite',

    props: {
        houseId: {
			type: Number,
            default: null
		},
        likeId: {
			type: Number,
            default: null
		},
        checked:{
			type: Boolean,
            default: false
		}
    },
    data() {
        return {
            local: '',
            isFavorite: false
        };
    },
    mounted() {
        this.isFavorite = this.checked;
    },
    watch: {
        checked: function (val) {
            this.isFavorite = val;
        }
    },
    methods: {
        click(e) {
            updateSaved(this.houseId, this.isFavorite, this.likeId || this.local).then((res) => {
                this.isFavorite = !this.isFavorite;
                getHouseDetail(this.houseId).then((house) => {
                    this.local = house.data.likeId;
                    this.$emit('change');
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.icon-favorite {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #ccc;
    &.selected {
        color: #f00;
    }
}
</style>
